<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" media="screen" href="/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" media="screen" href="/css/dataTables.bootstrap.min.css">
    <link rel="stylesheet" type="text/css" media="screen" href="/layui/css/layui.css">
    <link rel="stylesheet" type="text/css" href="/css/bootstrap-select.min.css">
    <script src="/js/libs/jquery-2.1.1.min.js"></script>
    <script src="/js/bootstrap/bootstrap.min.js"></script>
    <script src="/js/bootstrap/bootstrap-select.min.js"></script>
    <script src="/js/jq.js"></script>
    <script src="/js/plugin/bootstrapvalidator/bootstrapValidator.min.js"></script>
    <script src="/js/common.js"></script>
    <script src="/layui/layui.js"></script>
    <script src="/js/dict.js"></script>
    <script src="/js/table.js"></script>
    <script src="/js/libs/jquery.ztree.all-3.5.min.js"></script>
    <script src="/js/my/ztree-menu.js"></script>
    <script src="/js/my/permission.js"></script>
    <script src="/js/plugin/datatables/jquery.dataTables.min.js"></script>
    <script src="/js/plugin/datatables/dataTables.bootstrap.min.js"></script>
</head>
<body>
<div class="layui-row layui-col-space10" style="background-color: #F2F2F2;">
    <div class="col-xs-9 col-sm-9 col-md-9 col-lg-9">
        <div class="layui-card">
            <div class="layui-card-body">
                <header style="height: 100%">
                    <div align="left">
                        <table style="width: 100%">
                            <tr>
                                <td>
                                    <form class="form-inline" onsubmit="return false">
                                        <div class="form-group">
                                            用户名：
                                            <input id="username" type="text" class="form-control" placeholder="用户名">
                                            昵称：
                                            <input id="nickname" type="text" class="form-control" placeholder="昵称">
                                            状态：
                                            <select class="form-control input-sm col-md-1 selectpicker show-tick"
                                                    id="status" data-live-search="true">
                                            </select>
                                            部门：
                                            <input class='form-control' type='hidden' name='deptId' id='deptId'>
                                            <input class='form-control input-sm' type='text'
                                                   name='deptName' id='deptName' placeholder='所属部门' readonly>
                                            <a class="layui-btn layui-btn-sm"
                                               onclick="showTree('deptId', 'deptName', 'dept', '部门', 'root', 'select')">
                                                <i class="layui-icon">&#xe615;</i>
                                            </a>
                                            <button id="searchBt" class="layui-btn layui-btn-sm search"
                                                    permission="sys:user:query"><i class="layui-icon">&#xe615;</i>搜索
                                            </button>
                                        </div>
                                    </form>
                                </td>
                            </tr>
                        </table>
                    </div>
                </header>
                <div>
                    <div class="widget-body no-padding">
                        <table id="dt-table" class="table table-striped table-bordered table-hover" style="width:100%">
                            <thead>
                            <tr>
                            </tr>
                            <tr>
                                <th>ID</th>
                                <th>部门ID</th>
                                <th>部门</th>
                                <th>昵称</th>
                                <th>用户名</th>
                                <th>手机号</th>
                                <th>邮箱</th>
                                <th>状态</th>
                            </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3" style="height: 100%;">
        <div class="layui-card">
            <div class="layui-card-header">选中项</div>
            <div class="layui-card-body">
                <ul id="selectedItems"></ul>
            </div>
        </div>
    </div>
</div>
</body>
</html>

<script type="text/javascript">
    layui.use(['layer'], function () {
        var layer = layui.layer;
    });

    var userStatus = showDictSelect("status", "userStatus", '请选择');

    const isAll = getUrlParam("isAll");
    const isMultiSelect = eval(getUrlParam("isMultiSelect"));
    var echo = getUrlParam("echo");

    var example;

    function init() {
        example =
            $('#dt-table').DataTable({
                "searching": false,
                "processing": false,
                "serverSide": true,
                "language": {
                    "url": "/js/plugin/datatables/Chinese.lang"
                },
                "ajax": {
                    "url": "/users?isAll=" + isAll,
                    "type": "get",
                    "data": function (d) {
                        d.username = $('#username').val();
                        d.nickname = $('#nickname').val();
                        d.status = $('#status').val();
                        d.deptId = $('#deptId').val();
                    },
                    "error": function (xhr, textStatus, errorThrown) {
                        const msg = xhr.responseText;
                    }

                },
                "dom": "<'dt-toolbar'r>t<'dt-toolbar-footer'<'col-sm-10 col-xs-12 hidden-xs'i><'col-xs-12 col-sm-10' p v>>",
                "columns": [
                    {"data": "id", "defaultContent": "", "visible": false},
                    {"data": "deptId", "defaultContent": "", "visible": false},
                    {"data": "deptName", "defaultContent": ""},
                    {"data": "nickname", "defaultContent": ""},
                    {"data": "username", "defaultContent": ""},
                    {"data": "phone", "defaultContent": ""},
                    {"data": "email", "defaultContent": ""},
                    {
                        "data": "status",
                        "defaultContent": "",
                        "render": function (data, type, row) {
                            if (data === 0) {
                                return "<label style='color: red'>" + userStatus[data] + "</label>";
                            } else if (data === 1) {
                                return "<label style='color: green'>" + userStatus[data] + "</label>";
                            } else if (data === 2) {
                                return "<label style='color: orange'>" + userStatus[data] + "</label>";
                            }

                        }
                    }
                ],
                "initComplete": function (settings, json) {
                    if (echo) {
                        echo = JSON.parse(decodeURIComponent(echo));
                        if (echo.length !== 0) {
                            $.each(echo, function (i, _data) {
                                let item = '<li><div style="border: 1px; overflow: hidden;">' +
                                    '<span style="width: 80%; display: inline-block; white-space: nowrap; overflow: hidden;" name="selectedItem" ';

                                $.each(_data, function (k, v) {
                                    // item += 'data-'+k+'="' + JSON.stringify(v) + '" ';
                                    item += 'data-' + k + '="' + v + '" ';
                                });

                                item += '>' + _data['nickname'] + '&nbsp;</span>' +
                                    '<a style="width: 25px; float: right;" class="layui-btn layui-btn-xs" onclick="deleteItem(this)">' +
                                    '<i class="layui-icon layui-icon-close"></i></a></div></li>';
                                $('#selectedItems').append(item);
                            });
                        }
                    }
                },
                "rowCallback": function (row, data) {
                    $(row).on('click', function () {
                        if ($(this).hasClass('success')) {
                            $(this).removeClass('success');
                        } else {
                            if (!isMultiSelect) {
                                example.$('tr.success').removeClass('success');
                            }
                            $(this).addClass('success');
                        }
                        addItem(data, 'nickname', isMultiSelect);
                    })
                },
                "order": [[0, "asc"], [2, "asc"]]
            });

    }

    $("#searchBt").click(function () {
        example.ajax.reload();
    });

    init();
</script>